<template>
  <div class="recruitment-container">
    <el-card>
      <div class="action-header">
        <h2>已录用人员列表</h2>
        <div class="actions">
          <el-button icon="el-icon-download" @click="exportData">导出数据</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <div class="filter-controls">
        <el-input
            v-model="filter.keyword"
            placeholder="搜索姓名/职位"
            clearable
            style="width: 250px; margin-right: 15px;"
        />
        <el-select
            v-model="filter.experience"
            placeholder="工作经验"
            clearable
            style="width: 150px; margin-right: 15px;"
        >
          <el-option label="无经验" value="0" />
          <el-option label="1年以内" value="1" />
          <el-option label="1-3年" value="2" />
          <el-option label="3-5年" value="3" />
          <el-option label="5-10年" value="4" />
          <el-option label="10年以上" value="5" />
        </el-select>
        <el-select
            v-model="filter.education"
            placeholder="学历"
            clearable
            style="width: 150px; margin-right: 15px;"
        >
          <el-option label="大专以下" value="below_college" />
          <el-option label="大专" value="college" />
          <el-option label="本科" value="bachelor" />
          <el-option label="研究生" value="master" />
          <el-option label="博士" value="phd" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table :data="filteredList" style="width: 100%" height="600">
        <el-table-column prop="name" label="姓名" width="120">
          <template #default="scope">
            <div class="employee-info">
              <el-avatar :size="40" :src="scope.row.avatar" />
              <span style="margin-left: 10px;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="position" label="应聘职位" width="180" />
        <el-table-column prop="experience" label="工作经验" width="120">
          <template #default="scope">
            {{ formatExperience(scope.row.experience) }}
          </template>
        </el-table-column>
        <el-table-column prop="education" label="学历" width="120" />
        <el-table-column prop="applyDate" label="申请时间" width="180" />
        <el-table-column prop="offerDate" label="录用日期" width="150" />
        <el-table-column prop="onboardDate" label="预计入职" width="150" />
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                @click="handleOnboard(scope.row)"
            >确认入职</el-button>
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button
                v-if="scope.row.resume"
                size="small"
                icon="el-icon-download"
                @click="downloadResume(scope.row)"
            >简历</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'EmployedList',
  setup() {
    const filter = reactive({
      keyword: '',
      experience: '',
      education: ''
    })

    const employedList = ref([
      {
        id: 1,
        name: '张明',
        position: '前端工程师',
        experience: 3,
        education: '本科',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        applyDate: '2023-05-10',
        offerDate: '2023-05-15',
        onboardDate: '2023-06-01',
        resume: true
      },
      {
        id: 2,
        name: '李华',
        position: '后端工程师',
        experience: 4,
        education: '硕士',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        applyDate: '2023-05-12',
        offerDate: '2023-05-18',
        onboardDate: '2023-06-05',
        resume: true
      },
      {
        id: 3,
        name: '王芳',
        position: 'UI设计师',
        experience: 2,
        education: '本科',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        applyDate: '2023-05-15',
        offerDate: '2023-05-20',
        onboardDate: '2023-06-10',
        resume: true
      }
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(3)

    const filteredList = computed(() => {
      return employedList.value.filter(item => {
        const matchesKeyword = filter.keyword ?
            (item.name.includes(filter.keyword) || item.position.includes(filter.keyword)) : true

        const matchesExperience = filter.experience ?
            item.experience === filter.experience : true

        const matchesEducation = filter.education ?
            item.education === filter.education : true

        return matchesKeyword && matchesExperience && matchesEducation
      })
    })

    const formatExperience = (value) => {
      const map = {
        0: '无经验',
        1: '1年以内',
        2: '1-3年',
        3: '3-5年',
        4: '5-10年',
        5: '10年以上'
      }
      return map[value] || '未知'
    }

    const handleOnboard = (row) => {
      ElMessage.success(`确认入职: ${row.name}`)
      // 实际项目中这里会调用API更新状态
    }

    const handleView = (row) => {
      ElMessage.info(`查看详情: ${row.name}`)
      // 实际项目中这里会跳转到详情页
    }

    const downloadResume = (row) => {
      ElMessage.success(`开始下载${row.name}的简历`)
      // 实际项目中这里会调用下载API
    }

    const exportData = () => {
      ElMessage.success('数据导出成功')
    }

    const search = () => {
      currentPage.value = 1
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    return {
      filter,
      employedList,
      currentPage,
      pageSize,
      total,
      filteredList,
      formatExperience,
      handleOnboard,
      handleView,
      downloadResume,
      exportData,
      search,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.recruitment-container {
  padding: 20px;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.filter-controls {
  display: flex;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.employee-info {
  display: flex;
  align-items: center;
}
</style>